import { defineComponent, h } from "vue";
import {px_e_rem} from "@uit/common.js"
const YunButton = defineComponent({
    data(){
        return{

        }
    },
    setup(){


    },
    props:{
        onOK:{
            type:Function,
            required:false
        },
        text:{
            type:String,
            required:true,
        },
        width:{ 
            type:String,
            required:false
        },
        height:{
            type:String,
            required:false            
        },
        background:{
            type:String,
            required:false               
        },
        color:{
            type:String,
            required:false                     
        },
        font:{
            type:String,
            required:false                  
        },
        borderRadius:{
            type:String,
            required:false                  
        },
        boxwidth:{
            type:String,
            required:false              
        },
        boxheight:{
            type:String,
            required:false              
        },
        boxbackground:{
            type:String,
            required:false               
        },
        border:{
            type:String,
            required:false                
        },
        Icons:{
            type:String,
            required:false
        }
    },
    emits:['onclick'],
    render(){
        
        const createButton = () => {
            return h(
                'button',
                {
                    style:{
                        border:'none',
                        background:this.background?this.background:'#D8D8D8 linear-gradient(139deg, #7845EB 0%, #3D39D8 100%)',
                        color:this.color?this.color:"#ffffff",
                        fontSize:this.font?px_e_rem(this.font):"0.34rem",
                        width:this.width?px_e_rem(this.width):'3.3rem',
                        height:this.height?px_e_rem(this.height):'1.05rem',
                        borderRadius:this.borderRadius?px_e_rem(this.borderRadius):'0.1rem',
                        zIndex:'1',
                        border:this.border?this.border:'none',
                        textAlign: 'center',
                        lineHeight:this.height?px_e_rem(this.height):'1.05rem'
                    },
                    onclick:()=>this.$emit("onclick")
                },
                [
                    this.Icons?h('img',{src:require(`../../assets/imgs/${this.Icons}`),style:{width:px_e_rem(42),height:px_e_rem(42),verticalAlign: 'middle'}}):null,
                    this.text
                ]
                )   
            }
        
        const ButtonBoxshaow = () => {
           const BOXWIDTH = this.width - 80
           const BOXHEIGTH = this.height - 30
            return h(
                'div',
                {
                    style:{
                        width:this.boxwidth?px_e_rem(this.boxwidth):px_e_rem(BOXWIDTH),
                        height:this.boxheight?px_e_rem(this.boxheight):px_e_rem(BOXHEIGTH),
                        background:this.boxbackground?this.boxbackground:'#D8D8D8 linear-gradient(139deg, #7845EB 0%, #3D39D8 100%)',
                        borderRadius:px_e_rem(8),
                        filter: 'blur(12px)',
                        position: 'absolute',
                        top:'58%',
                        bottom:'50%',
                        left:'50%',
                        right:'50%',
                        transform: 'translate(-50%,-50%)',
                    }
                },
                null
            )
        }

        return h(
            'div',
            {
                style:{
                    position: 'relative',
                    display:'flex',
                    alignItems: 'center',
                    justifyContent: 'center'                    
                }
            },
            [
                createButton(),
                ButtonBoxshaow()
            ]
        )
    }
})



export default YunButton